<template>
  <div>
    <van-form @submit="onSubmit">
      <!-- 基本信息 -->
      <FormTitle title="基本信息"></FormTitle>
      <van-cell-group inset>
        <van-field
          v-model="formData.name"
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
          required
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-field
          v-model="formData.idCard"
          name="身份证号码"
          label="身份证号码"
          placeholder="请输入身份证号码"
          required
          :rules="[{ required: true, message: '请输入身份证号码' }]"
        />
        <van-field
          v-model="formData.tel"
          name="联系电话"
          label="联系电话"
          placeholder="请输入联系电话"
          required
          :rules="[{ required: true, message: '请输入联系电话' }]"
        />
        <van-field
          v-model="formData.homeAddress"
          name="家庭地址"
          label="家庭地址"
          placeholder="请输入家庭地址"
          required
          :rules="[{ required: true, message: '请输入家庭地址' }]"
        />
      </van-cell-group>
      <!-- 装修信息 -->
      <FormTitle title="装修信息"></FormTitle>
      <van-cell-group inset>
        <van-field
          v-model="formData.houseAddress"
          name="房屋住址"
          label="房屋住址"
          placeholder="请输入房屋住址"
          required
          :rules="[{ required: true, message: '请输入房屋住址' }]"
        />
        <van-field
          v-model="formData.houseType"
          name="房屋类型"
          label="房屋类型"
          placeholder="请输入房屋类型"
          required
          :rules="[{ required: true, message: '请输入房屋类型' }]"
        />
        <van-field
          v-model="formData.floor"
          name="楼层数"
          label="楼层数"
          placeholder="请输入内容"
          required
          :rules="[{ required: true, message: '请输入楼层数' }]"
        />
        <!-- 选择 -->
        <!-- <van-field
          v-model="formData.xzq"
          is-link
          readonly
          name="picker"
          label="装修类型"
          placeholder="请选择内容"
          @click="showPickerForType = true"
        />
        <van-popup round v-model:show="showPickerForType" position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirmZxlx"
            @cancel="showPickerForType = false"
          />
        </van-popup> -->

        <!-- 选择时间 -->
        <van-field
          v-model="formData.startTime"
          is-link
          readonly
          name="datePicker"
          label="开工日期"
          placeholder="点击选择开工日期"
          @click="selectTime1('time1')"
          required
          :rules="[{ required: true, message: '请选择装修开工时间' }]"
        />

        <van-field
          v-model="formData.jhzxqx"
          is-link
          readonly
          name="datePicker"
          label="计划装修期限"
          placeholder="点击选择计划装修期限"
          @click="selectTime2('time2')"
        />
      </van-cell-group>
      <!-- 施工方案 -->
      <FormTitle title="施工方案"></FormTitle>
      <van-cell-group inset>
        <van-field
          v-model="formData.constructionUnit"
          name="施工单位"
          label="施工单位"
          placeholder="请输入施工单位"
          required
          :rules="[{ required: true, message: '请输入施工单位' }]"
        />
        <van-field
          v-model="formData.superviseUnit"
          name="监管单位"
          label="监管单位"
          placeholder="请输入监管单位"
          required
          :rules="[{ required: true, message: '请输入监管单位' }]"
        />
        <!-- 选择时间 -->
        <van-field
          v-model="formData.longTime"
          is-link
          readonly
          name="datePicker"
          label="计划完成时间"
          placeholder="点击选择计划完成时间"
          @click="selectTime3('time3')"
          required
          :rules="[{ required: true, message: '请选择计划完成时间' }]"
        />

        <van-cell>
          <div class="font-w-8 van-field__label">施工资料</div>
          <van-uploader
            class="flex row-center p-20"
            v-model="formData.file"
            :after-read="afterRead"
          >
            <van-button color="#409EFE" plain round> 点击上传</van-button>
          </van-uploader>
        </van-cell>
      </van-cell-group>
      <!-- 资金来源 -->
      <!-- <FormTitle title="资金来源"></FormTitle>
      <van-cell-group inset>
        <van-field
          v-model="formData.ownerMoney"
          name="房主资金"
          label="房主资金"
          placeholder="请输入房主资金"
        />
        <van-field
          v-model="formData.dkMoney"
          name="贷款金额"
          label="贷款金额"
          placeholder="请输入贷款金额"
        />
      </van-cell-group>

      <FormTitle title="装修验收"></FormTitle>
      <van-cell-group inset>
        <van-field
          v-model="formData.ysdw"
          name="验收单位"
          label="验收单位"
          placeholder="请输入验收单位"
        />
        <van-field
          v-model="formData.yssj"
          name="验收时间"
          label="验收时间"
          placeholder="请输入验收时间"
        />
        <van-cell>
          <div class="font-w-8 van-field__label w100vw">验收材料（公章材料）</div>
          <van-uploader class="flex row-center p-20" v-model="formData.ysFile">
            <van-button color="#409EFE" plain round> 点击上传</van-button>
          </van-uploader>
        </van-cell>
      </van-cell-group> -->
      <!-- 备注 -->
      <van-cell-group inset class="mt-10">
        <van-field
          v-model="formData.remakes"
          label-align="top"
          rows="2"
          autosize
          label="备注"
          type="textarea"
          maxlength="500"
          placeholder="请输入备注"
          show-word-limit
        />
      </van-cell-group>
      <div class="dvc"></div>
      <div class="bottomButton">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

    <!-- 开工日期 -->
    <van-popup round v-model:show="showPickerForTimeKGRQ" position="bottom">
      <van-date-picker
        @confirm="onConfirmForTimeKGRQ"
        @cancel="showPickerForTimeKGRQ = false"
      />
    </van-popup>

    <!-- 计划装修期限 -->
    <van-popup round v-model:show="showPickerForTimeJHZXQX" position="bottom">
      <van-date-picker
        @confirm="onConfirmForTimeJHZXQX"
        @cancel="showPickerForTimeJHZXQX = false"
      />
    </van-popup>

    <!-- 计划完成时间 -->
    <van-popup round v-model:show="showPickerForTimeJHWCSJ" position="bottom">
      <van-date-picker
        @confirm="onConfirmForTimeJHWCSJ"
        @cancel="showPickerForTimeJHWCSJ = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import houseApi from "@/api/house";
import { showToast } from "vant";
import { useUserStore } from "../../stores/user";
import FormTitle from "@/components/formTitle/index.vue";
import { useRouter } from "vue-router";
const store = useUserStore();
const router = useRouter();
// 表单数据
const infoForm = ref({
  result: "",
  updata1: [],
});

const formData = reactive({
  name: "",
  idCard: "",
  tel: "",
  homeAddress: "",
  houseAddress: "",
  houseType: "",
  floor: "",
  xzq: "",
  startTime: "", //装修开工时间
  jhzxqx: "",
  constructionUnit: "",
  superviseUnit: "",
  longTime: "",
  file: [],
  ownerMoney: "",
  dkMoney: "",
  ysdw: "",
  yssj: "",
  ysFile: [],
  remakes: "",
});

// 控制底部展示的数据的flag for type
const showPickerForTimeKGRQ = ref(false);
const showPickerForTimeJHZXQX = ref(false);
const showPickerForTimeJHWCSJ = ref(false);
// type类型
const columns = [
  { text: "杭州", value: "Hangzhou" },
  { text: "宁波", value: "Ningbo" },
  { text: "温州", value: "Wenzhou" },
  { text: "绍兴", value: "Shaoxing" },
  { text: "湖州", value: "Huzhou" },
];
// 装修类型
// { selectedOptions }
const onConfirmForTimeKGRQ = ({ selectedValues }) => {
  formData.startTime = selectedValues.join("-");
  showPickerForTimeKGRQ.value = false;
};

const onConfirmForTimeJHZXQX = ({ selectedValues }) => {
  formData.jhzxqx = selectedValues.join("-");
  showPickerForTimeJHZXQX.value = false;
};

const onConfirmForTimeJHWCSJ = ({ selectedValues }) => {
  formData.longTime = selectedValues.join("-");
  showPickerForTimeJHWCSJ.value = false;
};
// 选中的时间属性名称
const thisTimeName = ref("");
// 打开时间选择器
const selectTime1 = (name) => {
  thisTimeName.value = name;
  showPickerForTimeKGRQ.value = true;
};
const selectTime2 = (name) => {
  thisTimeName.value = name;
  showPickerForTimeJHZXQX.value = true;
};
const selectTime3 = (name) => {
  thisTimeName.value = name;
  showPickerForTimeJHWCSJ.value = true;
};
// 控制底部展示的数据的flag for Time
const showPickerForTime = ref(false);

// 控制时间滑块
const onConfirmForTime = ({ selectedValues }) => {
  infoForm.value[thisTimeName.value] = selectedValues.join("-");
  console.log(infoForm.value);
  showPickerForTime.value = false;
};
const list = ref([])
const afterRead = (file) => {
  console.log("file", file);

  file.status = "uploading";
  file.message = "上传中...";

  const filelist = new FormData();
  filelist.append("file", file.file);

  houseApi.uploadImage(filelist).then((res) => {
    if (res.data.code == 200 && res.data.msg == "操作成功") {
      list.value.push(res.data.fileName);
    }
  });

  setTimeout(() => {
    file.status = "done";
    file.message = "上传成功";
  }, 1000);
};
// 提交
const onSubmit = async () => {
  let params = {
    name: formData.name,
    tel: formData.tel,
    idCard: formData.idCard,
    homeAddress: formData.homeAddress,
    houseAddress: formData.houseAddress,
    houseType: formData.houseType,
    floor: formData.floor,
    startTime: formData.startTime,
    longTime: formData.longTime,
    constructionUnit: formData.constructionUnit,
    superviseUnit: formData.superviseUnit,
    file: list.value.join(","),
    remakes: formData.remakes,
    jhzxqx: formData.jhzxqx,
    current: "",
    createBy: store.userInfo.userId,
  };
  let res = await houseApi.renovationCreate(params);
  // console.log("--res--", res);
  if (res.data.code === 200) {
    showToast("添加成功！");
    setTimeout(() => {
      router.push("/renovation");
    }, 1500);
  }
};
</script>

<style lang="scss" scoped>
.dvc {
  height: 70px;
}
::v-deep .van-uploader {
  .van-uploader__input-wrapper {
    .van-button--default {
      width: 151px;
      height: 40px;
    }
    .van-uploader__input {
      width: 151px;
      height: 40px;
      border-radius: 133px;
      background: #ecf5ff;
      box-sizing: border-box;
      border: 1px solid #409efe;
    }
  }
}
::v-deep .van-overlay {
  background: rgba(0, 0, 0, 0.5);
}
</style>
